
<template>
	<div class="main">
		<!--<div class="duibi"  id="drag" >
			111111111111
		</div>-->
		<div class="content">
			<router-view></router-view>
		</div>
		<nav class="mui-bar mui-bar-tab nav-bar" style="border-top: 1px solid #ebe4e4;box-shadow: none;">
			<router-link class="mui-tab-item1 mui-active" to="/" style='color:#0186c2'>
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">好房排行</span>
			</router-link>
			<!--<router-link class="mui-tab-item1" to="/personal">
				<span class="mui-icon mui-icon-extra mui-icon-extra-heart"></span>
				<span class="mui-tab-label">定制排行</span>
			</router-link>-->
			<router-link class="mui-tab-item1" to="/map">
				<span class="mui-icon mui-icon-location"></span>
				<span class="mui-tab-label">地图找房</span>
			</router-link>
			<router-link class="mui-tab-item1" to="/user">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">个人中心</span>
			</router-link>
			<!--<router-link class="mui-tab-item1" to="/consult">
				<span class="mui-icon mui-icon-extra mui-icon-extra-xiaoshuo"></span>
				<span class="mui-tab-label">资讯</span>
			</router-link>
			<router-link class="mui-tab-item1" to="/personal">
				<span class="mui-icon mui-icon-person-filled"></span>
				<span class="mui-tab-label">我的</span>-->
			<!--</router-link>-->
		</nav>
	</div>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		mounted: function() {
			$('nav').on('click', 'a', function() {

				var city0 = localStorage.getItem('city');
				var type = localStorage.getItem('type');
//				var obj = {};
//				var data = {
//					city: city0,
//					page: 1,
//					houseType: type,
//					lng: '',
//					lat: '',
//					screenNearBy: {
//						screenNearByNum: obj.screenNearBy,
//						screenNearBySign: obj.screenNearBySign
//					},
//					screenPrice: {
//						screenPriceNum: obj.screenPrice,
//						screenPriceSign: obj.screenPriceSign
//					},
//					screenHuXing: obj.screenHuXing,
//					screenCharacteristic: obj.screenCharacteristic,
//					screenMetro: obj.screenMetro,
//					screenMetroer: obj.screenMetroer,
//					screenSpace: obj.screenSpace,
//					screenTradArea: obj.screenTradArea,
//					cheWeiBi: {
//						cheWeiBiNum: obj.cheWeiBi,
//						cheWeiBiSign: obj.cheWeiBiSign
//					},
//					sheQuGuiMo: obj.sheQuGuiMo,
//				}
//				localStorage.setItem('data', JSON.stringify(data));
				$(this).css('color', '#0186c2').siblings().css('color', '#929292');
			})
			
			// 最好放在DIV下方，避免DIV没有加载完，获取不到
		    $('#drag').on('touchmove', function(e) {
		
		        // 阻止其他事件
		        e.preventDefault();
		
		        // 判断手指数量
		        if (e.originalEvent.targetTouches.length == 1) {
					var dei = 50;
		            // 将元素放在滑动位置
		            var touch = e.originalEvent.targetTouches[0];  
		            $("#drag").css({'left': touch.pageX-dei + 'px',
		                'top': touch.pageY-dei + 'px'});
		        }
		    });
		}
	}
</script>
<style scoped>
	.main {
		background-color: #fff;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	nav {
		position: fixed;
		bottom: 0;
	}
	.nav-bar {
		height: 50px;
		background-color: #f8f8f8;
	}
	
	.nav-bar .mui-tab-item1 {
		display: table-cell;
		overflow: hidden;
		width: 1%;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		color: #929292;
	}
	
	.mui-bar-tab .mui-tab-item1 .mui-icon {
		top: 3px;
		width: 24px;
		height: 24px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
		font-size: 11px;
		display: block;
		overflow: hidden;
	}
	
	select {
		width: auto;
		border: 0;
		background-color: #0186c2;
		color: #fff;
		line-height: 20px;
		margin-top: 10px;
		font-size: 14px;
	}
	
	select option {
		padding: 0;
		margin: 0;
	}
	.duibi {
		position: fixed;
		left: 0px;
        top: 100px;
		width: 100px;
		height: 100px;
		background: #000;
		z-index: 9999;
	}
</style>